<template>
    <view style="height: 100%">
        <l-grid :row-num="size" l-class="l-class">
            <l-grid-item :key="index" :slot="index" v-for="(item, index) in urlsClone">
                <view class="item l-item-class" @tap.stop.prevent="onPreviewTap" :data-index="index">
                    <view class="close" :data-index="index" @tap.stop.prevent="onDelTap">
                        <l-icon name="close" color="#fff" size="22" l-class="close-icon" />
                    </view>
                    <image :class="size === 3 ? 'img' : 'min-img'" :mode="mode" :src="newOrOld === 'old' ? item : item.url" />
                </view>
            </l-grid-item>

            <l-grid-item v-if="showBtn">
                <view :class="'item l-item-class ' + (size === 3 ? 'img' : 'min-img')" @tap.stop.prevent="onAddTap" v-if="custom">
                    <slot></slot>
                </view>
                <view :class="'item l-item-class ' + (size === 3 ? 'img' : 'min-img')" @tap.stop.prevent="onAddTap" v-else>
                    <image class="add-icon" src="/static/miniprogram_npm/lin-ui/image-picker/image/add.png" />
                </view>
            </l-grid-item>
        </l-grid>
    </view>
</template>

<script>
import lIcon from '../icon/index';
import lGridItem from '../grid-item/index';
import lGrid from '../grid/index';
import validator from '../behaviors/validator';
export default {
    data() {
        return {
            showBtn: true,
            tempFilePath: '',
            newOrOld: '',
            urlsClone: []
        };
    },

    externalClasses: ['l-class', 'l-item-class'],
    mixins: ['wx://form-field', validator],

    props: {
        urls: {
            type: Array,
            default: () => []
        },
        count: {
            type: [String, Number],
            default: 9
        },
        clear: {
            type: Boolean,
            default: false
        },
        size: {
            type: [String, Number],
            default: 3,
            options: [3, 4, '3', '4']
        },
        sizeType: {
            type: String,
            default: 'original',
            options: ['original', 'compressed']
        },
        mode: {
            type: String,
            default: 'aspectFit',
            options: ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'top', 'bottom', 'center', 'left', 'right', 'top left', 'top right', 'bottom left', 'bottom right']
        },
        custom: {
            type: Boolean,
            default: false
        },
        preview: {
            type: Boolean,
            default: true
        },
        maxImageSize: {
            type: Number,
            default: 10000000
        },
        cells: {
            type: Array,
            default: null
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    methods: {
        attached: function () {
            let e = this.judgeNewOrOld();
            if (null !== this.cells) {
                e = 'new';
                this.setData({
                    newOrOld: e,
                    urlsClone: this.cells
                });
            } else {
                this.setData({
                    newOrOld: e
                });
            }
        },

        handleClear() {
            let e = this.urlsClone;
            this.setData({
                urlsClone: [],
                clearClone: false,
                showBtn: true
            });
            let t = {
                all: e,
                current: e
            };
            this.$emit(
                'linclear',
                {
                    detail: t
                },
                {}
            );
        },

        onPreviewTap(e) {
            const t = e.currentTarget.dataset.index;
            const l = this.urlsClone;
            let a = '';
            let s = [];
            const i = this.newOrOld;
            if (void 0 !== this.cells) {
                const e = this.cells;
                a = e[t].url;
                for (let t = 0; t < e.length; t++) {
                    s.push(e[t].url);
                }
            } else if ('old' === i) {
                a = this.urlsClone[t];
                s = this.urlsClone;
            } else {
                a = this.urlsClone[t].url;
                for (let e = 0; e < l.length; e++) {
                    s.push(l[e].url);
                }
            }
            let r = {
                index: t,
                current: l[t],
                all: l
            };
            if (true === this.preview) {
                uni.previewImage({
                    current: a,
                    urls: s
                });
            }
            this.$emit(
                'linpreview',
                {
                    detail: r
                },
                {}
            );
        },

        onAddTap() {
            const that = this;
            const t = this.count - this.urlsClone.length;
            if (0 === t) {
                return;
            }
            const l = this.newOrOld;
            uni.chooseImage({
                count: t,
                sizeType: this.sizeType,
                sourceType: ['album', 'camera'],
                success(t) {
                    let a = [];
                    if ('old' === l) {
                        a = t.tempFilePaths;
                    } else {
                        for (let l = 0; l < t.tempFilePaths.length; l++) {
                            a.push({
                                url: t.tempFilePaths[l],
                                imageSize: t.tempFiles[l].size
                            });
                            a[l].overSize = t.tempFiles[l].size > that.maxImageSize;
                        }
                    }
                    const s = that.urls.concat(a);
                    if (s.length === parseInt(that.count)) {
                        that.setData({
                            showBtn: false
                        });
                    }
                    that.setData({
                        urlsClone: s,
                        value: s,
                        tempFilePath: a
                    });
                    let i = {
                        current: a,
                        all: s
                    };
                    let r = {};
                    that.$emit(
                        'linchange',
                        {
                            detail: i
                        },
                        r
                    );
                    that.$emit(
                        'linpush',
                        {
                            detail: i
                        },
                        r
                    );
                    let n = [];
                    for (let e = 0; e < s.length; e++) {
                        if (s[e].overSize) {
                            n.push(s[e]);
                        }
                    }
                    if (n.length > 0) {
                        let t = {
                            current: a,
                            all: s,
                            overSizeList: n
                        };
                        that.$emit(
                            'linoversize',
                            {
                                detail: t
                            },
                            r
                        );
                    }
                }
            });
        },

        onDelTap(e) {
            const t = e.currentTarget.dataset.index;
            const l = this.urlsClone;
            const a = l[t];
            const s = this.handleSplice(l, a);
            if (s.length < parseInt(this.count)) {
                this.setData({
                    showBtn: true
                });
            }
            this.setData({
                tempFilePath: a,
                urlsClone: s,
                value: s
            });
            let i = {
                index: t,
                current: a,
                all: s
            };
            this.$emit(
                'linremove',
                {
                    detail: i
                },
                {}
            );
        },

        handleSplice: (e, t) => e.filter((e) => e !== t),

        judgeNewOrOld: function () {
            const e = this.urlsClone;
            return 0 !== e.length && 'object' != typeof e[0] ? 'old' : 'new';
        }
    },

    created: function () {}
};
</script>
<style>
.item {
    position: relative;
}
.close {
    position: absolute;
    right: 10rpx;
    top: 10rpx;
    height: 40rpx;
    width: 40rpx;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    z-index: 99;
}
.add {
    height: 220rpx;
    width: 220rpx;
    border: 1rpx solid #eee;
    border-radius: 4rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.add-icon {
    height: 100rpx;
    width: 100rpx;
}
.img {
    height: 220rpx;
    width: 220rpx;
    margin-bottom: 10rpx;
    border: 1rpx solid #eee;
    border-radius: 4rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.min-img {
    height: 160rpx;
    width: 160rpx;
    margin-bottom: 10rpx;
    border: 1rpx solid #eee;
    border-radius: 4rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.flex {
    border: 1rpx solid #eee;
    border-radius: 4rpx;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>
